<template>
	<!-- 添加 mask-click 属性以支持遮罩点击关闭 -->
	<uni-popup ref="passwordPopup" type="center" :mask-click="true" @maskClick="closeModal">
		<view class="password-modal">
			<view class="box">
				<view class="title">温馨提示</view>
				<template v-if="option==0">
					<view class="txt">
						<view>接单前请注意以下几点：</view>
						<view class="public-margin-top-medium">1.接单前请<text class="public-red">先绑定收款方式并开启接单</text></view>
						<view class="public-margin-top-medium">2.接单后如<text class="public-red">已收到该笔转账</text>，请点击【已收到】按钮
						</view>
						<view class="public-margin-top-medium">3.接单后如<text class="public-red">未收到该笔转账</text>，请点击【未收款】按钮
						</view>
					</view>
				</template>
				<template v-if="option==1">
					<view class="txt-flex">
						<view class="public-margin-top-medium">{{pointOut}}</view>
					</view>
				</template>

				<template v-if="option==2">
					<view class="txt">
						<view class="divide-box">
							<view v-for="(item,index) in list" :key="index" class="divide">
								<image class="divide-img" :src="payimg(item.bank_type_id)"></image>
								<view class="pay-type">{{paytype(item.bank_type_id)+':'}}</view>
								<view class="percentage">{{item.rebate_ratio+'%'}}</view>
							</view>
						</view>
					</view>
				</template>

				<template v-if="option==3">
					<view class="reset">
						<text class="reset-title">重置账号密码</text>
						<input class="reset-input" placeholder="填写账号/手机号"/>
						<view class="service">
							<image class="service-img" src="/static/homeImg/kefu.png"></image>
							<text class="service-txt">联系客服</text>
						</view>
					</view>
				</template>
				
				<template v-if="option==4">
					<view class="trade-flex trade-top" v-if="itemData.bank_type_id !=2">
						<view class="txt-w">请复制收款账号进行转账</view>
						<view class="trade-number" @click="copyOrderNumber(itemData.bank_card)" >
							<view class="trade-number-box">收款账号：<text class="public-black6">{{itemData.bank_card}}</text></view>
							<image class="copy-image" src="/static/commonImg/fuzhihuang.png"></image>
						</view>
					</view>
					<view class="img-pay-flex" v-else>
						<view class="txt-w">请保存二维码扫描支付</view>
						<image class="img-pay" :src="itemData.qr_code" @click="lookImg(itemData.qr_code)"></image>
					</view>
					
				</template>

				<view class="foot" v-if="option!=2">
					<view class="cancel" @click="closeModal">取消</view>
					<view class="true" v-if="option==4" @click="confirmChange">完成支付</view>
					<view class="true" v-else @click="confirmChange">确认</view>
				</view>
				<template v-else>
					<view class="foot-close">
						<view class="close" @click="closeModal">关闭</view>
					</view>
				</template>
			</view>
		</view>
		</view>
	</uni-popup>
</template>

<script>
	import date from '@/computingTool/date.js';
	export default {
		props: {
			option: {
				type: String,
				default: "0",
			},
			pointOut: String,
			list: {
				type:Array,
				default:()=>[],
			},
			popupType:String,//弹窗的类型、用途标识
			confirmTxt:String,//确认按钮默认文字
			
			itemData: {
			  type: Object,
			  default: () => ({}) // 传递而来的{}数据
			}

		},
		data() {
			return {

			};
		},

		methods: {
			// 打开弹窗（供父组件调用）
			open() {
				this.$refs.passwordPopup.open();
			},

			// 关闭弹窗
			closeModal() {
				console.log('进入')
				this.$refs.passwordPopup.close();
				this.$emit('close');
			},

			// 确认修改
			confirmChange() {
				let data = {
					popupType:this.popupType
				}
				// 将数据传递给父组件处理
				this.$emit('confirm', data);
			},
			//预览图片
			lookImg(http){
				 uni.previewImage({
				    urls: [http], // 需要预览的图片列表（即使单张也要用数组）
				    current: 0,       // 默认显示第一张
				  });
			},
			//复制订单号
			copyOrderNumber(orderNumber){
				uni.setClipboardData({
					data: orderNumber,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'success'
						});
					}
				});
			},
			/* 过滤器start */
			//收款渠道
			paytype(value){
				if(value==1){
					return '银行卡'
				}else if(value==2){
					return '微信'
				}else if(value==3){
					return '支付宝'
				}else if(value==4){
					return '云闪付'
				}else if(value==5){
					return '数字人民币'
				}else if(value==6){
					return '钉钉'
				}
			},
			//收款渠道图片
			payimg(value){
				if(value==1){
					return '/static/payImg/yinghangkazhuangzhang.png'
				}else if(value==2){
					return '/static/payImg/weixin.png'
				}else if(value==3){
					return '/static/payImg/zhifubao.png'
				}else if(value==4){
					return '/static/payImg/yunshanfu.png'
				}else if(value==5){
					return '/static/payImg/shuzirenmingbi.png'
				}else if(value==6){
					return '/static/payImg/dingding.png'
				}
			},
			//订单状态
			orderStart(value){
				if(value==0){
					return '待支付'
				}else if(value==1){
					return '已抢单'
				}else if(value==2){
					return '已支付'
				}else if(value==3){
					return '已完成'
				}else if(value==4){
					return '已取消'
				}
			},
			//时间戳
			timeString(value){
				// 1. 转换时间戳
				const timestamp = value;
				const millis = timestamp * 1000;
				
				// 2. 格式化为字符串"2025-07-18 17:59:55" (北京时间)
				const dateStr = new Date(millis).Format("yyyy-MM-dd hh:mm:ss");
				return dateStr
				
				// 3. 使用自定义格式 "2025年07月18日 17时59分"
				// const customFormat = new Date(millis).Format("yyyy年MM月dd日 hh时mm分");
			},
			/* 过滤器end */
		}
	};
</script>

<style scoped>
	/* 弹窗样式 - 优化版 */
	.password-modal {
		width: 85vw;
		max-width: 650rpx;
		background: linear-gradient(135deg, #f8f9fd 0%, #ffffff 100%);
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
		border: 1rpx solid #e8ebf5;
	}

	.box {
		background-color: #ffffff;
	}

	.title {
		background-color: #f7de7a;
		display: flex;
		justify-content: center;
		padding: 10rpx 0;
	}

	.txt {
		padding: 20rpx 20rpx;
	}

	.txt-flex {
		padding: 20rpx 20rpx;
		text-align: center;
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx;
	}

	.cancel {
		width: 45%;
		background-color: #d4d4d4;
		padding: 30rpx 0;
		border-radius: 20rpx;
		text-align: center;
		color: #484848;
	}

	.true {
		width: 45%;
		background-color: #ffc905;
		padding: 30rpx 0;
		border-radius: 10rpx;
		text-align: center;
		color: #484848;
	}

	/* 第三个模板 */
	.divide-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.divide {
		display: flex;
		align-items: center;
		gap: 5px;
		flex: 1 1 calc(50% - 5px);
		min-width: calc(50% - 5px);
		margin-top: 10rpx;
	}

	.divide-img {
		width: 30rpx;
		height: 30rpx;
	}

	.pay-type {
		font-size: 24rpx;
	}

	.percentage {
		color: #d40000;
	}

	.foot-close {
		text-align: center;
		padding: 40rpx 30rpx;
	}

	.close {
		background-color: #ffc905;
		padding: 15rpx 0;
		border-radius: 10rpx;
		text-align: center;
		color: #484848;
	}
	/* 第四个模板 */
	.reset{
		margin: 20rpx 30rpx;
	}
	.reset-title{
		
	}
	.reset-input{
		border: #9c9c9c 2rpx solid;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: inset 0 0 10rpx rgba(0, 0, 0, 0.3); 
	}
	.service{
		width: 200rpx;
		background-color: #ffc905;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
	}
	.service-img{
		width:45rpx;
		height: 45rpx;
	}
	.service-txt{
		
	}
	/* 第五个模板 */
	.trade-flex{
		text-align: center;
	}
	.txt-w{
		font-weight: 600;
		font-size: 40rpx;
		margin-top: 20rpx;
	}
	.trade-number-box{
		font-size: 40rpx;
	}
	.trade-number{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
	}
	.copy-image{
		width: 30rpx;
		height: 30rpx;
		padding-left: 5rpx;
	}
	.img-pay{
		width: 400rpx;
		height: 400rpx;
		margin-top: 20rpx;
	}
	.img-pay-flex{
		text-align: center;
	}
</style>